<template>
  <!-- 配置 -->
  <div>
    <a-modal class="configuration" title="配置" width="600px" @ok="handleOk" @cancel="handleCancel" :visible="configurationVisible">
      <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="rules">
        <a-form-model-item label="提交选择审批人" prop="SUMBIT_ASSIGN">
          <a-radio-group v-model="form.SUMBIT_ASSIGN"
            ><a-radio :value="0">否</a-radio>
            <a-radio :value="1"> 是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="发起人可撤回" prop="START_RECALL">
          <a-radio-group v-model="form.START_RECALL"
            ><a-radio :value="0">否</a-radio>
            <a-radio :value="1"> 是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="审批人可撤回" prop="APPROVE_RECALL">
          <a-radio-group v-model="form.APPROVE_RECALL"
            ><a-radio :value="0">否</a-radio>
            <a-radio :value="1"> 是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="流程审批人员为空通知" prop="ASSIGN_NOTICE">
          <a-radio-group v-model="form.ASSIGN_NOTICE"
            ><a-radio :value="0">否</a-radio>
            <a-radio :value="1"> 是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="流程加急功能" prop="URGE">
          <a-radio-group v-model="form.URGE"
            ><a-radio :value="0">否</a-radio>
            <a-radio :value="1"> 是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="自动催办提醒时间（小时）" prop="URGE_TIME">
          <a-input-number v-model="form.URGE_TIME" :min="0" :precision="0" :max="1000000" :step="0" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { processAddConfig } from '@/api/system/process' // api
import { getConfig } from '@/api/process'

export default {
  props: {
    // 是否显示
    configurationVisible: {
      type: Boolean,
      default: () => false
    },
    modelKey: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      form: {
        URGE_TIME: '',
        APPROVE_RECALL: '',
        START_RECALL: '',
        ASSIGN_NOTICE: '',
        URGE: '',
        SUMBIT_ASSIGN: ''
      }, // 表单
      rules: {
        URGE_TIME: [{ required: true, message: '请输入自动催办提醒时间（小时）', trigger: 'blur' }],
        SUMBIT_ASSIGN: [{ required: true, message: '请输入提交选择审批人', trigger: 'change' }],
        START_RECALL: [{ required: true, message: '请输入发起人可撤回', trigger: 'change' }],
        APPROVE_RECALL: [{ required: true, message: '请输入审批人可撤回', trigger: 'change' }],
        ASSIGN_NOTICE: [{ required: true, message: '请输入流程审批人员为空通知', trigger: 'change' }],
        URGE: [{ required: true, message: '请输入流程加急功能', trigger: 'change' }]
      }, // 校验规则
      init: false // 初始化控件
    }
  },
  watch: {
    configurationVisible: {
      handler(val) {
        val && this.getConfigFn()
      },
      immediate: true
    }
  },
  methods: {
    handleCancel() {
      this.$emit('handleCancel', false)
      this.$refs.ruleForm.resetFields()
    },
    //新增配置
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        let req = {
          modelKey: this.modelKey,
          config: {}
        }
        if (valid) {
          req.config = this.form
          processAddConfig(req).then((res) => {
            if (res.status == 200) {
              this.$message.success('配置成功')
              this.handleCancel()
            }
          })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    //获取配置详情
    getConfigFn() {
      getConfig({ processKey: this.modelKey }).then((res) => {
        if (res.code === 200) {
          let data = res.data
          data.length &&
            data.map((item) => {
              Object.keys(this.form).map((objItem) => {
                if (item.keyCol == objItem) {
                  this.form[objItem] = item.keyValue * 1
                }
              })
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@deep: ~'>>>';
.configuration {
  @{deep} .ant-form-item-label {
    width: 198px;
  }
  @{deep} .ant-form-item .ant-form-item-control-wrapper {
    width: calc(100% - 198px);
  }
  @{deep} .ant-form-item {
    margin-bottom: 0;
    height: 59px;
  }
}
</style>
